/* eslint-disable no-unused-vars */
/* eslint-disable class-methods-use-this */
/* eslint-disable import/no-cycle */
import React from 'react';
import { Tabs, Form, Input, Checkbox, message, Button } from 'antd';
import ReactEcharts from 'echarts-for-react';
import echarts from 'echarts';
import BaseControl from './BaseControl';
import BindSelect from '../common/BindSelect';
import DesignUtil from '../common/DesignUtil';
import Resize from '../common/Resize';

const { TabPane } = Tabs;

class EchartControl extends BaseControl {
  static create(props, dataProps, extProps) {
    return new EchartControl(props, dataProps, extProps);
  }

  constructor(props, dataProps, extProps) {
    const dataProps2 = {
      title: '报表',
      type: 'Echart',
      options: JSON.stringify({}),
      widthPercent: 30,
      // height: 30,
      ...dataProps,
    };
    super(props, dataProps2, extProps);
    this.name = '报表';
    this.chartRef = null;
    this.resizedTime = new Date().getTime();
    // this.value = this.data.defaultValue;
    // this.icon = '';
  }

  getPropertyTabs(parentForm) {
    return [
      ...super.getPropertyTabs(parentForm),
      <TabPane tab="控件配置" key="3">
        <Form.Item label="options配置">
          <BindSelect
            data={this.data}
            field="options"
            defaultValue="{}"
            child={() => {
              return (
                <>
                  <Input.TextArea
                    placeholder="请输入options配置"
                    rows={20}
                    value={this.data.options}
                    onChange={(event) => {
                      this.data.options = event.target.value;
                      // this.tempKey = DesignUtil.UUID(16);
                      parentForm.refreash();
                    }}
                  />
                </>
              );
            }}
          />
        </Form.Item>
      </TabPane>,
    ];
  }

  getDesignControl(parentForm) {
    return (
      <Resize
        onChange={(e) => {
          if (this.chartRef != null) {
            const obj = this.chartRef.getEchartsInstance();
            obj.resize();
          }
        }}
      >
        <ReactEcharts
          ref={(e) => {
            this.chartRef = e;
          }}
          option={DesignUtil.tryParseJson(this.data.options, {})}
          notMerge
          lazyUpdate
          onChartReady={() => {}}
          onEvents={{
            rendered: () => {},
          }}
          style={{
            width: `100%`,
            height: this.data.height === 0 ? '300px' : `${this.data.height}px`, // 默认300px
          }}
          {...this.extProps}
        />
      </Resize>
    );
  }
}

export default EchartControl;
